<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>定时任务管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<style type="text/css">
    body {
        width: 80%;
        text-align: center;
        margin: auto;
    }

    table {
        text-align: center;
        width: 100%;
    }

    a {
        border: 1px black solid;
        color: white;
        margin: 3px;
        background-color: cornflowerblue;
    }
</style>
<body>
<h1>任务调度中心</h1>
<table>
    <thead>
    <tr>
        <td>序号</td>
        <td>cron_key</td>
        <td>cron表达式</td>
        <td>任务描述</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr th:each="cron,iterStat:${cronList}">
        <td th:text="${iterStat.count}"></td>
        <td th:text="${cron.cronKey}"></td>
        <td th:text="${cron.status} == 1 ? ${cron.cronExpression}:'---'"></td>
        <td th:text="${cron.taskExplain}"></td>
        <td th:text="${cron.status} == 1 ? '正常':'暂停'"></td>
        <td>
            <a style="cursor: pointer" th:data-cron-key="${cron.cronKey}"
               th:data-cron-expression="${cron.cronExpression}"
               onclick="editTaskCron(this)">编辑</a>
            <a style="cursor: pointer" th:data-cron-key="${cron.cronKey}"
               th:data-cron-expression="${cron.cronExpression}"
               onclick="runTaskCron(this)">执行</a>
            <a style="cursor: pointer" th:data-cron-key="${cron.cronKey}"
               th:data-cron-status="${cron.status}"
               th:text="${cron.status} == 1 ? '暂停':'恢复'"
               onclick="changeStatusTaskCron(this)">暂停</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
<script type="text/javascript">
    var AppConsts = {
        ENABLED: 1,
        DISABLED: 2
    }

    function editTaskCron(aObj) {
        let cronKey = aObj.getAttribute("data-cron-key");
        let cronExpression = aObj.getAttribute("data-cron-expression");
        let newCron = window.prompt("请输入新的表达式:", cronExpression);
        if (newCron === null || newCron === '') {
            return;
        }
        let formData = new FormData();
        formData.append("newCron", newCron);
        formData.append("cronKey", cronKey);
        post("/scheduled/task/editTaskCron", "/scheduled/task/taskList", formData);
    }

    function runTaskCron(aObj) {
        let cronKey = aObj.getAttribute("data-cron-key");
        let formData = new FormData();
        formData.append("cronKey", cronKey);
        post("/scheduled/task/runTaskCron", "/scheduled/task/taskList", formData);
    }

    function changeStatusTaskCron(aObj) {
        let cronKey = aObj.getAttribute("data-cron-key");
        let status = aObj.getAttribute("data-cron-status");
        if (status == AppConsts.ENABLED) {
            status = AppConsts.DISABLED;
        } else {
            status = AppConsts.ENABLED;
        }
        let formData = new FormData();
        formData.append("cronKey", cronKey);
        formData.append("status", status);
        post("/scheduled/task/changeStatusTaskCron", "/scheduled/task/taskList", formData);
    }

    function post(reqUrl, successUrl, formData) {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4) {
                return;
            }
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                var resJson = JSON.parse(xhr.responseText);
                alert(resJson.msg);
                if (resJson.code !== 0) {
                    return;
                }
                location.href = successUrl;
            } else {
                console.log("Request was unsuccessful: " + xhr.status);
            }
        };
        xhr.open("post", reqUrl, false);
        xhr.send(formData);
    }
</script>
</html>